import React, { Component } from 'react';
import './index.css'
import NavBar from '../../components/NavBar';

class My extends Component {
  render() {
    return (
      <div className="mine-container">
         <div className="mine-info">
           <div className="info">
             <div className="avatar">
               <img src="https://img.chuangbie.com/user/icon/default.jpg" alt="" />
             </div>
             <div  className="vu-col">
               <p>书友7716199</p>
               <p>ID:7716199</p>
               <p>Phone
                 <i></i>
               </p>
             </div>
             <div  className="chongzhi">
               <p>充值</p>
             </div>
           </div>
           <div className="wallet">
             <div className="wallet-item">
                <p className="wallet-item-color">15创币</p>
                <p>余额</p>
             </div>
             <div className="wallet-item borders">
                <p  className="wallet-item-color">0元</p>
                <p>优惠券</p>
             </div>
             <div className="wallet-item">
                <p  className="wallet-item-color">未开通</p>
                <p>包月特权</p>
             </div>
             
           </div>
         </div>
        <div className="fit">
          <ul className="fit-content">
            <li>
                <p>
                  <i className="iconfont iconwenjian" style={{ fontSize:'.20rem',color:'rgb(44, 205, 192)'}}></i>
                    消费记录
                </p>
              <p>
                 <i className="iconfont iconjiankuohao1" style={{ fontSize:' .133333rem'}}></i>
              </p>
            </li>
            <li>
                <p>
                  <i className="iconfont iconqian" style={{ fontSize:'.20rem',color:'rgb(44, 205, 192)'}}></i>
                    充值记录
                </p>
              <p>
                 <i className="iconfont iconjiankuohao1" style={{ fontSize:' .133333rem'}}></i>
              </p>
            </li>
            <li>
                <p>
                  <i className="iconfont iconqiandao" style={{ fontSize:'.20rem',color: 'rgb(255, 162, 211)'}}></i>
                    签到领金币
                </p>
              <p>
                 <i className="iconfont iconjiankuohao1" style={{ fontSize:' .133333rem'}}></i>
              </p>
            </li>
            <li>
                <p>
                  <i className="iconfont iconyijian" style={{ fontSize:'.20rem',color:'rgb(44, 205, 192)'}}></i>
                    意见反馈
                </p>
              <p>
                 <i className="iconfont iconjiankuohao1" style={{ fontSize:' .133333rem'}}></i>
              </p>
            </li>
            <li>
                <p>
                  <i className="iconfont iconzhiwen" style={{ fontSize:'.20rem',color: 'rgb(160, 217, 17)'}}></i>
                    修改密码
                </p>
              <p>
                 <i className="iconfont iconjiankuohao1" style={{ fontSize:' .133333rem'}}></i>
              </p>
            </li>
            <li>
                <p>
                  <i className="iconfont iconshezhi1" style={{ fontSize:'.20rem',color:'rgb(255, 153, 0)'}}></i>
                    设置
                </p>
              <p>
                 <i className="iconfont iconjiankuohao1" style={{ fontSize:' .133333rem'}}></i>
              </p>
            </li>
          </ul>
          
            <button className="sogin-out" onClick={this.Logout}>退出登录</button>
            <div className="poster">
              <img src="https://m.chuangbie.com/static/img/1_banner.287ec1f3.png" alt="" />
            </div>
        </div>
        <div style={{height:'.5rem'}}></div>
        <NavBar/>
      </div>
    );
  }

  Logout = () =>{
    this.props.history.push('/login')
  }
}

export default My;